/**
 * @Author：zy
 * @Description：源码解析 https://www.zhihu.com/tardis/sogou/art/63217182
 * @Data: 2020/10/10 17:51
 */
//import React from 'react';
//import ReactDOM from 'react-dom';
import React,{Component} from './kreact';
import ReactDOM from './kreact-dom';

import './index.css';


//函数组件
function Comp(props){
  return (
      <h2>hi,{props.name}</h2>
  )
}

//class组件
class Comp2 extends Component{
    render() {
        return (
            <div>
                <h2>hi,{this.props.name}</h2>
                <h3>hi,{this.props.name}</h3>
            </div>
        )
    }
}

//JSX只是简化了React的使用难度，但并不是必须的。在程序运行前会使用Babel把JSX转换成原始JS代码  babel-loader会编译JSX为React.createElement(...) 即虚拟Dom节点
const jsx = (
  <div id='demo'>
      <span>hi</span>
      <Comp name='zy'/>
      <Comp2 name='zy2'/>
  </div>
);


console.log('虚拟DOM',jsx);

ReactDOM.render(
  jsx,
  document.getElementById('root')
);

